<script type="text/javascript">
    /**
     * @Description：看板展示（showEqpBoard.gsp）
     * @Author： 樊双峰
     * @Date： 2018-07-03 22:52
     */
    var getEqpInfo = function(showEqpBoardURL) {
        // 数据模型
        var dataModel = new ht.DataModel();
        // 拓扑组件
        var graphView = new ht.graph.GraphView(dataModel);
        view = graphView.getView();
        view.className = 'myCanvas';
        // 将view添加至DOM
        document.body.appendChild(view);
        window.addEventListener('resize', function (e) {
            graphView.invalidate();
        }, false);
        // 设置缩放功能
        graphView.setZoom(0.8);
        graphView.translate(-80, -50);
        graphView.setEditable(false)

        <g:each in="${areaList}" status="i" var="a">
            var group${i} = new ht.Group();
            group${i}.setName('${a.AREA_DESC}');
            group${i}.setStyle('group.title.align' ,'center');
            group${i}.setStyle('group.toggleable' ,false);
            group${i}.setStyle('group.title.font' ,'bold 21px arial');
            group${i}.setStyle('group.title.font' ,'bold 21px arial');
            group${i}.setStyle('group.padding', 0);
            group${i}.setStyle('group.padding.left', 0);
            group${i}.setStyle('group.padding.right', -90);
            group${i}.setStyle('group.padding.top', -20);
            group${i}.setStyle('group.padding.bottom', 0);
            group${i}.setStyle('group.background', '#ccc');
            group${i}.setStyle('group.border.pattern', [5,5]);
            group${i}.setStyle('group.border.color', '#fff');
            group${i}.setStyle('group.border.width', '5');
            group${i}.setExpanded(true);
            dataModel.add(group${i});
        </g:each>

        // 获取设备信息
        $.ajax({
            type: 'GET',
            url: showEqpBoardURL+"/EqpBoard/getEqpInfoJson",
            dataType: 'json',
            async: true,
            success: function (data) {
                $.each(data, function (index, items) {
                    // 新建图元
                    var shapeNode = new ht.Node();
                    /* 设置节点禁止拖动、编辑 START */
                    shapeNode.setStyle('2d.movable',false);
                    shapeNode.setStyle('2d.editable',false);
                    /* 设置节点禁止拖动、编辑 END */
                    // 设置设备描述，setImage在此处只是作为容器
                    shapeNode.setImage(items.EQP_DESC);
                    // 设置图元宽高尺寸
                    shapeNode.setSize(items.EQP_WIDTH, items.EQP_HEIGHT);
                    // 设置图元中心点坐标
                    shapeNode.setPosition(items.EQP_X, items.EQP_Y);
                    // 设置图形
                    shapeNode.setStyle('shape', items.EQP_GRAPH_NAME);
                    // 边框宽度
                    shapeNode.setStyle('shape.border.width', 2);
                    // 设置字体
                    shapeNode.setStyle('label.font', '15px 微软雅黑')
                    // 设备边框颜色
                    shapeNode.setStyle('shape.border.color', '#000');
                    // 设备背景颜色
                    shapeNode.setStyle('shape.background', items.EQP_COLOR);
                    // ID 移除功能用
                    shapeNode.setStyle('note.offset.x', items.ID);
                    // 设备ID
                    shapeNode.setStyle('label', items.EQP_ID);
                    // 设置透明度为0，不显示
                    shapeNode.setStyle('note.opacity', 0);
                    // 设置报警描述
                    shapeNode.setStyle('note', '已停机！');
                    // 设备 DOWN 自动报警
                    if((items.EQP_STATE).indexOf('DOWN') != -1){
                        setInterval(function(){
                            if (new Date().getSeconds() % 2 === 1) {
                                shapeNode.setStyle('note.opacity', 0);
                            } else {
                                shapeNode.setStyle('note.background', '#ffff00');
                                shapeNode.setStyle('note.color', '#000000');
                                shapeNode.setStyle('note.opacity', 1);
                                shapeNode.setStyle('note.position', 1);
                                shapeNode.setStyle('note.scale', 1);
                                shapeNode.setStyle('note.offset.x', 10);
                                shapeNode.setStyle('note.offset.y', 1);
                                shapeNode.setStyle('note.align', 'center');
                            }
                        }, 1000);
                    }
                    // 设备ID的位置
                    shapeNode.setStyle('label.position', '17'); // 居中
                    // 旋转角度
                    shapeNode.setRotation(items.EQP_ROTATION);
                    <g:each in="${areaList}" status="i" var="a">
                        if('${a.AREA_NAME}'==(items.EQP_AREA_NAME)){
                            shapeNode.setParent(group${i});
                        }
                    </g:each>
                    // 将节点加入到数据模型
                    dataModel.add(shapeNode);

                    /* 鼠标悬停 START */
                    graphView.enableToolTip();
                    graphView.getToolTip = function(e) {
                        var data = graphView.getDataAt(e);
                        if (!data) return '';
                        var label = '';
                        if (!(data instanceof ht.Text)) {
                            if('${areaList}'.indexOf(data)>0) {
                                return;
                            } else {
                                label =
                                        '<p><em>设备ID：</em>'+"<span style='color: #ff0000;'>" + data.getStyle('label') + "</span>"+'</p>'
                                        + '<p><em>描述：</em>'+"<span style='color: #ff0000;'>" + data.getImage() + "</span></p>";
                            }                        }
                        return label;
                    };
                    /* 鼠标悬停 END */
                });
            }
        });
    }
</script>